<template>
  <div></div>
</template>

<script>
export default {
  name: "echarts",
  data() {
    return {};
  },
  props: {
    chartData: {
      type: Object,
      default: () => {
        return {
          color: "green",
          value: 60,
          name: "",
        };
      },
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // let chartDom = document.getElementById('main');
      let myChart = this.$echarts.init(this.$el);
      let option = {
        series: [
          {
            color: this.chartData.color,
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                // borderWidth: 1,
                // borderColor: "#464646",
                 color: {
                        type: 'linear', // 线性渐变
                        // x: 0,
                        // y: 0,
                        // x2: 0,
                        // y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: this.chartData.color[0] // 0%处的颜色为红色
                        }, {
                            offset: 1,
                            color: this.chartData.color[1] // 100%处的颜色为蓝
                        }]
                    }
              },
            },
            axisLine: {
              lineStyle: {
                width: 8,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: this.chartData.value,
                name: this.chartData.name,
                title: {
                  offsetCenter: ["0%", "-20%"],
                },
                detail: {
                  offsetCenter: ["0%", "20%"],
                },
              },
            ],
            title: {
              fontSize: 14,
            },
            detail: {
              fontSize: 24,
              fontWeight: 400,
              color: "#333",
              formatter: "{value}%",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>